<template>
  <div class="register-container">
    <div class="register-box">
      <h2>用户注册</h2>
      <div class="form-group">
        <label for="username">用户名</label>
        <input 
          type="text" 
          id="username" 
          v-model="username" 
          placeholder="请输入用户名"
        >
      </div>
      <div class="form-group">
        <label for="email">邮箱</label>
        <input 
          type="email" 
          id="email" 
          v-model="email" 
          placeholder="请输入邮箱"
        >
      </div>
      <div class="form-group">
        <label for="password">密码</label>
        <input 
          type="password" 
          id="password" 
          v-model="password" 
          placeholder="请输入密码"
        >
      </div>
      <div class="form-group">
        <label for="confirmPassword">确认密码</label>
        <input 
          type="password" 
          id="confirmPassword" 
          v-model="confirmPassword" 
          placeholder="请再次输入密码"
        >
      </div>
      <div class="form-group">
        <button @click="handleRegister" class="register-btn">注册</button>
      </div>
      <div class="form-group">
        <router-link to="/login" class="login-link">已有账号？去登录</router-link>
      </div>
      <div v-if="errorMsg" class="error-message">{{ errorMsg }}</div>
    </div>
  </div>
</template>

<script setup>
import { ref } from 'vue';
import { useRouter } from 'vue-router';
import api from '../services/api';

const router = useRouter();
const username = ref('');
const email = ref('');
const password = ref('');
const confirmPassword = ref('');
const errorMsg = ref('');

const handleRegister = async () => {
  try {
    // 验证输入
    if (!username.value || !email.value || !password.value || !confirmPassword.value) {
      errorMsg.value = '请填写完整信息';
      return;
    }
    
    if (password.value !== confirmPassword.value) {
      errorMsg.value = '两次输入的密码不一致';
      return;
    }
    
    // 发送注册请求
    const response = await api.post('/auth/register', {
      username: username.value,
      email: email.value,
      password: password.value
    });
    
    if (response.data.success) {
      alert('注册成功！请登录');
      router.push('/login');
    } else {
      errorMsg.value = response.data.message || '注册失败';
    }
  } catch (error) {
    console.error('注册错误:', error);
    errorMsg.value = error.response?.data?.message || '注册失败，请重试';
  }
};
</script>

<style scoped>
.register-container {
  display: flex;
  justify-content: center;
  align-items: center;
  min-height: 100vh;
  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
}

.register-box {
  background: white;
  padding: 2rem;
  border-radius: 10px;
  box-shadow: 0 10px 25px rgba(0, 0, 0, 0.1);
  width: 100%;
  max-width: 400px;
}

.register-box h2 {
  text-align: center;
  margin-bottom: 1.5rem;
  color: #333;
}

.form-group {
  margin-bottom: 1rem;
}

.form-group label {
  display: block;
  margin-bottom: 0.5rem;
  color: #555;
  font-weight: 500;
}

.form-group input {
  width: 100%;
  padding: 0.75rem;
  border: 1px solid #ddd;
  border-radius: 5px;
  font-size: 1rem;
  transition: border-color 0.3s;
}

.form-group input:focus {
  outline: none;
  border-color: #667eea;
}

.register-btn {
  width: 100%;
  padding: 0.75rem;
  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
  color: white;
  border: none;
  border-radius: 5px;
  font-size: 1rem;
  cursor: pointer;
  transition: transform 0.2s;
}

.register-btn:hover {
  transform: translateY(-2px);
}

.login-link {
  display: block;
  text-align: center;
  color: #667eea;
  text-decoration: none;
  margin-top: 1rem;
}

.login-link:hover {
  text-decoration: underline;
}

.error-message {
  color: #e74c3c;
  text-align: center;
  margin-top: 1rem;
  font-size: 0.9rem;
}
</style>